/** Created by NiXiaowei on 11/08/2017. */
.w12 { width: 1200px; margin: 0 auto; }

.fl { float: left; }

.fr { float: right; }

select { border: solid 1px #999; border-radius: 5px; appearance: none; -moz-appearance: none; -webkit-appearance: none; padding-right: 14px; background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent; }

input, textarea { border: 1px solid #999; border-radius: 5px; }

select::-ms-expand { display: none; }

body { font-family: "Arial", "Microsoft YaHei", sans-serif; }

.heading { width: 1200px; height: 40px; margin: 0 auto; font-size: 16px; }
.heading .phone { display: inline-block; height: 40px; line-height: 40px; float: left; }
.heading .login-reg { display: inline-block; float: right; line-height: 40px; }
.heading .login-reg span { display: inline-block; padding: 0 10px; line-height: 16px; }
.heading .login-reg span:first-child { border-right: 1px solid #000; }
.heading .login-reg span.red { color: #ff9900; }
.heading .is-login { display: inline-block; float: right; line-height: 40px; }
.heading .is-login img { display: inline-block; width: 30px; height: 30px; vertical-align: middle; }
.heading .is-login span { display: inline-block; padding: 0 10px; line-height: 16px; }
.heading .is-login span.name { color: #ff9900; }

.banner { width: 100%; min-width: 1200px; height: 120px; background: #f5f5f5; }
.banner .banner-contain { height: 100%; background: url("../static/img/logo-black.png") no-repeat left center; background-size: 100px; font-size: 0; }
.banner .banner-contain .item { display: inline-block; height: 100%; width: 280px; font-size: 14px; color: #a07946; background: url("../static/img/banner-icon2.png") no-repeat left center; background-size: 36px 30px; vertical-align: middle; }
.banner .banner-contain .item:first-child { margin-left: 280px; background: url("../static/img/banner-icon1.png") no-repeat left center; }
.banner .banner-contain .item:last-child { background: url("../static/img/banner-icon3.png") no-repeat left center; }
.banner .banner-contain .item p { width: 200px; height: 40px; margin-left: 50px; margin-top: 40px; }
.banner .banner-contain .item p span { line-height: 20px; }

.nav { width: 100%; height: 50px; background: #ff9900; min-width: 1200px; }
.nav .nav-item { width: 133px; height: 50px; float: left; text-align: center; line-height: 50px; font-size: 18px; color: #fff; }
.nav .nav-item.active { background: #fff; color: #ff9900; }
.nav .nav-lesson { position: relative; cursor: pointer; }
.nav .nav-lesson #special-click { width: 100%; height: 100%; display: block; }
.nav .nav-lesson .lesson-slide { height: 600px; position: absolute; top: 50px; right: 0; z-index: 9999999; background: rgba(255, 255, 255, 0.7); border: 1px solid #f0f1f0; }
.nav .nav-lesson .lesson-slide ul { height: 100%; }
.nav .nav-lesson .lesson-slide ul li { width: 164px; height: 58px; text-align: center; line-height: 58px; font-size: 18px; color: #1a1a1a; position: relative; border-bottom: 1px solid #f0f1f0; }
.nav .nav-lesson .lesson-slide ul li.active { background-color: #ff9900; color: #ffffff; }
.nav .nav-lesson .lesson-slide .third-list { width: 170px; height: 600px; background: rgba(255, 255, 255, 0.7); position: absolute; left: -170px; top: 0px; display: none; text-align: left; }
.nav .nav-lesson .lesson-slide .third-list span { width: 100%; height: 40px; color: #333333; line-height: 40px; font-size: 16px; padding: 5px 10px; }
.nav .nav-lesson .lesson-slide .third-list span.active { color: #ff9900; }

.center-wrapper { background: #f5f5f5; padding-top: 20px; min-height: 600px; }
.center-wrapper .center-contain { font-size: 0; }
.center-wrapper .center-contain .center-contain-left { display: inline-block; width: 240px; background: #fff; vertical-align: top; font-size: 18px; }
.center-wrapper .center-contain .center-contain-left .center-nav-title { width: 100%; height: 60px; background: #fff5e5; font-size: 22px; color: #ff9900; text-indent: 20px; padding-top: 10px; line-height: 40px; }
.center-wrapper .center-contain .center-contain-left .center-nav-title p:first-child { font-size: 14px; line-height: 14px; color: #808080; }
.center-wrapper .center-contain .center-contain-left ul { width: 100%; padding-bottom: 30px; }
.center-wrapper .center-contain .center-contain-left ul li { width: 100%; height: 30px; line-height: 30px; margin-top: 10px; text-indent: 20px; cursor: pointer; }
.center-wrapper .center-contain .center-contain-left ul li.active { color: #ff9900; }
.center-wrapper .center-contain .center-contain-right { display: inline-block; width: 940px; margin-left: 20px; margin-bottom: 20px; background: #fff; vertical-align: middle; box-sizing: border-box; padding: 20px; }

.foot { width: 100%; height: 150px; min-width: 1200px; }
.foot .company-info { width: 100%; height: 120px; background: #313131; }
.foot .company-info .info-contain { height: 100%; background: url("../static/img/logo.png") no-repeat left center; background-size: 100px; padding-top: 6px; }
.foot .company-info .info-contain .info-link { width: 600px; height: 30px; margin-left: 600px; text-align: right; color: #fff; }
.foot .company-info .info-contain .info-link:first-child { font-size: 0; }
.foot .company-info .info-contain .info-link span { display: inline-block; line-height: 20px; font-size: 14px; padding: 0 5px; text-align: center; border-right: 1px solid #fff; }
.foot .company-info .info-contain .info-link span:last-child { border-right: none; }
.foot .copyright { width: 100%; height: 30px; line-height: 30px; background: #1a1a1a; color: #fff; font-size: 14px; text-align: center; }

.tanchuang { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; }
.tanchuang .recharge-money { width: 500px; height: 300px; position: absolute; left: 50%; top: 50%; margin: -150px 0 0 -250px; background-color: #ffffff; position: relative; }
.tanchuang .recharge-money .rm-input { width: 100%; height: 240px; overflow: hidden; }
.tanchuang .recharge-money .rm-input .rmi-box { width: 300px; height: 40px; margin: 45px auto 0; }
.tanchuang .recharge-money .rm-input .rmi-box span { float: left; vertical-align: middle; line-height: 40px; margin-left: 10px; }
.tanchuang .recharge-money .rm-input .rmi-box span input { width: 200px; height: 34px; text-indent: 5px; }
.tanchuang .recharge-money .rm-button { width: 100%; height: 60px; }
.tanchuang .recharge-money .rm-button button { width: 250px; height: 60px; float: left; }
.tanchuang .recharge-money .rm-button .cancel { background-color: #dcdcdc; text-align: center; line-height: 60px; color: #ffffff; font-size: 14px; }
.tanchuang .recharge-money .rm-button .confirm { background-color: #ff9900; text-align: center; line-height: 60px; color: #ffffff; font-size: 14px; }
.tanchuang .recharge-money .rm-close { width: 20px; height: 60px; position: absolute; right: 0; top: -60px; background: url(../static/img/cha.png) center no-repeat; background-size: 20px 60px; cursor: pointer; }

.grid { list-style: none; margin-left: -20px; }

.grid__col--2-of-2, .grid__col--3-of-3, .grid__col--4-of-4, .grid__col--5-of-5, .grid__col--6-of-6, .grid__col--8-of-8, .grid__col--12-of-12 { width: 100%; }

.grid__col--1-of-2, .grid__col--2-of-4, .grid__col--3-of-6, .grid__col--4-of-8, .grid__col--6-of-12 { width: 50%; }

.grid__col--1-of-3, .grid__col--2-of-6, .grid__col--4-of-12 { width: 33.33333%; }

.grid__col--2-of-3, .grid__col--4-of-6, .grid__col--8-of-12 { width: 66.66667%; }

.grid__col--1-of-4, .grid__col--2-of-8, .grid__col--3-of-12 { width: 25%; }

.grid__col--3-of-4, .grid__col--6-of-8, .grid__col--9-of-12 { width: 75%; }

.grid__col--push-2-of-2, .grid__col--push-3-of-3, .grid__col--push-4-of-4, .grid__col--push-5-of-5, .grid__col--push-6-of-6, .grid__col--push-8-of-8, .grid__col--push-12-of-12 { margin-left: 100%; }

.grid__col--push-1-of-2, .grid__col--push-2-of-4, .grid__col--push-3-of-6, .grid__col--push-4-of-8, .grid__col--push-6-of-12 { margin-left: 50%; }

.grid__col--push-1-of-3, .grid__col--push-2-of-6, .grid__col--push-4-of-12 { margin-left: 33.33333%; }

.grid__col--push-2-of-3, .grid__col--push-4-of-6, .grid__col--push-8-of-12 { margin-left: 66.66667%; }

.grid__col--push-1-of-4, .grid__col--push-2-of-8, .grid__col--push-3-of-12 { margin-left: 25%; }

.grid__col--push-3-of-4, .grid__col--push-6-of-8, .grid__col--push-9-of-12 { margin-left: 75%; }

.grid__col--pull-2-of-2, .grid__col--pull-3-of-3, .grid__col--pull-4-of-4, .grid__col--pull-5-of-5, .grid__col--pull-6-of-6, .grid__col--pull-8-of-8, .grid__col--pull-12-of-12 { margin-left: -100%; }

.grid__col--pull-1-of-2, .grid__col--pull-2-of-4, .grid__col--pull-3-of-6, .grid__col--pull-4-of-8, .grid__col--pull-6-of-12 { margin-left: -50%; }

.grid__col--pull-1-of-3, .grid__col--pull-2-of-6, .grid__col--pull-4-of-12 { margin-left: -33.33333%; }

.grid__col--pull-2-of-3, .grid__col--pull-4-of-6, .grid__col--pull-8-of-12 { margin-left: -66.66667%; }

.grid__col--pull-1-of-4, .grid__col--pull-2-of-8, .grid__col--pull-3-of-12 { margin-left: -25%; }

.grid__col--pull-3-of-4, .grid__col--pull-6-of-8, .grid__col--pull-9-of-12 { margin-left: -75%; }

.grid__col--1-of-5 { width: 20%; }

.grid__col--push-1-of-5 { margin-left: 20%; }

.grid__col--pull-1-of-5 { margin-left: -20%; }

.grid__col--2-of-5 { width: 40%; }

.grid__col--push-2-of-5 { margin-left: 40%; }

.grid__col--pull-2-of-5 { margin-left: -40%; }

.grid__col--3-of-5 { width: 60%; }

.grid__col--push-3-of-5 { margin-left: 60%; }

.grid__col--pull-3-of-5 { margin-left: -60%; }

.grid__col--4-of-5 { width: 80%; }

.grid__col--push-4-of-5 { margin-left: 80%; }

.grid__col--pull-4-of-5 { margin-left: -80%; }

.grid__col--1-of-6 { width: 16.66667%; }

.grid__col--push-1-of-6 { margin-left: 16.66667%; }

.grid__col--pull-1-of-6 { margin-left: -16.66667%; }

.grid__col--5-of-6 { width: 83.33333%; }

.grid__col--push-5-of-6 { margin-left: 83.33333%; }

.grid__col--pull-5-of-6 { margin-left: -83.33333%; }

.grid__col--1-of-8 { width: 12.5%; }

.grid__col--push-1-of-8 { margin-left: 12.5%; }

.grid__col--pull-1-of-8 { margin-left: -12.5%; }

.grid__col--3-of-8 { width: 37.5%; }

.grid__col--push-3-of-8 { margin-left: 37.5%; }

.grid__col--pull-3-of-8 { margin-left: -37.5%; }

.grid__col--5-of-8 { width: 62.5%; }

.grid__col--push-5-of-8 { margin-left: 62.5%; }

.grid__col--pull-5-of-8 { margin-left: -62.5%; }

.grid__col--7-of-8 { width: 87.5%; }

.grid__col--push-7-of-8 { margin-left: 87.5%; }

.grid__col--pull-7-of-8 { margin-left: -87.5%; }

.grid__col--1-of-12 { width: 8.33333%; }

.grid__col--push-1-of-12 { margin-left: 8.33333%; }

.grid__col--pull-1-of-12 { margin-left: -8.33333%; }

.grid__col--2-of-12 { width: 16.66667%; }

.grid__col--push-2-of-12 { margin-left: 16.66667%; }

.grid__col--pull-2-of-12 { margin-left: -16.66667%; }

.grid__col--5-of-12 { width: 41.66667%; }

.grid__col--push-5-of-12 { margin-left: 41.66667%; }

.grid__col--pull-5-of-12 { margin-left: -41.66667%; }

.grid__col--7-of-12 { width: 58.33333%; }

.grid__col--push-7-of-12 { margin-left: 58.33333%; }

.grid__col--pull-7-of-12 { margin-left: -58.33333%; }

.grid__col--10-of-12 { width: 83.33333%; }

.grid__col--push-10-of-12 { margin-left: 83.33333%; }

.grid__col--pull-10-of-12 { margin-left: -83.33333%; }

.grid__col--11-of-12 { width: 91.66667%; }

.grid__col--push-11-of-12 { margin-left: 91.66667%; }

.grid__col--pull-11-of-12 { margin-left: -91.66667%; }

.grid__col { box-sizing: border-box; display: inline-block; margin-right: -.25em; min-height: 1px; padding-left: 20px; vertical-align: top; }

@media (max-width: 700px) { .grid__col { display: block; margin-left: 0; margin-right: 0; width: auto; } }
@media (max-width: 700px) and (min-width: 480px) { .grid__col[class*="grid__col--m-"] { display: inline-block; margin-right: -.24em; }
  .grid__col.grid__col--m-1-of-2, .grid__col.grid__col--m-2-of-4 { width: 50%; }
  .grid__col.grid__col--m-1-of-3 { width: 33.33333%; }
  .grid__col.grid__col--m-2-of-3 { width: 66.66667%; }
  .grid__col.grid__col--m-1-of-4 { width: 25%; }
  .grid__col.grid__col--m-3-of-4 { width: 75%; } }
@media (max-width: 480px) { .grid__col[class*="grid__col--s-"] { display: inline-block; margin-right: -.24em; }
  .grid__col.grid__col--s-1-of-2, .grid__col.grid__col--s-2-of-4 { width: 50%; }
  .grid__col.grid__col--s-1-of-3 { width: 33.33333%; }
  .grid__col.grid__col--s-2-of-3 { width: 66.66667%; }
  .grid__col.grid__col--s-1-of-4 { width: 25%; }
  .grid__col.grid__col--s-3-of-4 { width: 75%; } }
.grid__col--centered { display: block; margin-left: auto; margin-right: auto; }

.grid__col--d-first { float: left; }

.grid__col--d-last { float: right; }

.grid--no-gutter { margin-left: 0; width: 100%; }

.grid--no-gutter .grid__col { padding-left: 0; }

.grid--no-gutter .grid__col--span-all { margin-left: 0; width: 100%; }

.grid__col--ab { vertical-align: bottom; }

.grid__col--am { vertical-align: middle; }
